<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="./CSS/register.css">
</head>

<body>
<div class="box">
    <div class="mask">
        <div class="spinner">
            <div class="cube1"></div>
            <div class="cube2"></div>
        </div>
    </div>
    <div class="LoginBox">
        <div class="LoginImage">

        </div>
        <div class="LoginLeft">
            <div class="LeftBox">
                <div class="BoxTitle">
                    <p style="font-size: 20px;font-weight: 900;margin-bottom: 10px;">数字校园注 册</p>
                    <p style="color: red;" class="inputErrpMsg"></p>
                </div>

                <div class="inputBox1">
                    <form action="#" class="form">
                        <!-- 姓名输入框 -->
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">用户名</p>
                            <div class="inputP">
                                <input type="text" class="userInput" name="username">
                            </div>
                        </div>
                        <div class="userNmaeInputErro">中文、英文、数字</div>

                        <!-- 密码输入框 -->
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">密码</p>
                            <div class="inputP">
                                <input type="password" class="userInput userPassword" name="password">
                            </div>
                        </div>
                        <div class="userPasswordInputErro">6~11位数字、字母、下划线</div>

                        <!-- QQ邮箱输入框 -->
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">QQ邮箱</p>
                            <div class="inputP">
                                <input type="text" name="usernameQQemail" class="userQQemail">
                            </div>
                        </div>
                        <div class="userEmailInputErro">@qq.com</div>

                        <!-- 手机输入框 -->
                        <div class="inputBox">
                            <p style="color: rgb(73, 161, 238);">手机号</p>
                            <div class="inputP">
                                <input type="text" name="usernamePhoneNumber" class="userPhone">
                            </div>
                        </div>
                        <div class="userPhoneInputErro">11位数字</div>

                        <!-- 性别选择框 -->
                        <div class="inputBox inputBoxSex">
                            <p style="color: rgb(73, 161, 238);">性别</p>
                            <div class="inputP inputSex">
                                <input type="radio" name="userSex" value="1" checked class="sexForman">
                                <p style="margin-left: 1rem;">男</p>
                                <input type="radio" name="userSex" value="2" style="margin-left: 4rem;"
                                       class="sexForwomen">
                                <p style="margin-left: 1rem;">女</p>
                            </div>
                        </div>


                        <div class="inputBox inputBoxSex">
                            <p style="color: rgb(73, 161, 238);">职业</p>
                            <div class="inputP inputSex">
                                <input type="radio" name="userProfession" value="1" checked class="posiztionStudent">
                                <p style="margin-left: 1rem;">学生</p>
                                <input type="radio" name="userProfession" value="2" style="margin-left: 4rem;"
                                       class="posiztionTeacher">
                                <p style="margin-left: 1rem;">老师</p>
                            </div>
                        </div>
                        <div class="userSexInputErro"></div>
                        <input type="submit" value="注册" class="inputSubmit">
                        <input type="submit" value="登录" class="inputregister">
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

    // 获取屏幕宽度
    var font = document.body.offsetWidth / 200 + "px";
    if (document.body.offsetWidth <= 1312) {
        font = 1312 / 200 + 'px'
    }
    document.querySelector("html").style.fontSize = font;


    // 正则表达式
    var zhenzheUsername = /^[\u4E00-\u9FA5A-Za-z0-9]+$/;
    var zhengzhePassword = /^\w{6,11}$/;
    var zhengzheQqemail = /\d+@qq.com/;
    var zhengzhePhoneNumber = /[1][3-9]\d{9}$/

    // 表单控制以及样式
    var inputErrpMsg = document.querySelector(".inputErrpMsg");
    var form = document.querySelector(".form");
    var userInput = document.querySelector(".userInput");
    var userNmaeInputErro = document.querySelector(".userNmaeInputErro");

    var userPassword = document.querySelector(".userPassword");
    var userPasswordInputErro = document.querySelector(".userPasswordInputErro")

    var userQQemail = document.querySelector(".userQQemail")
    var userEmailInputErro = document.querySelector(".userEmailInputErro")

    var usernamePhoneNumber = document.querySelector(".userPhone");
    var userPhoneInputErro = document.querySelector(".userPhoneInputErro")
    var mask = document.querySelector(".mask")
    var inputBoxList = document.querySelectorAll(".inputBox")


    userInput.addEventListener("blur", () => {
        inputerro(zhenzheUsername, userInput, userNmaeInputErro, "只能中文、字母、英文")
        inputBoxList[0].style.boxShadow = "0px 0px 0px -0px skyblue"
    })

    userPassword.addEventListener("blur", () => {
        inputerro(zhengzhePassword, userPassword, userPasswordInputErro, "6~11位长度 数字、字母、下划线")
        inputBoxList[1].style.boxShadow = "0px 0px 0px -0px skyblue"

    })

    userQQemail.addEventListener("blur", () => {
        inputerro(zhengzheQqemail, userQQemail, userEmailInputErro, "只能以@qq.com")
        inputBoxList[2].style.boxShadow = "0px 0px 0px -0px skyblue"
    })

    usernamePhoneNumber.addEventListener("blur", () => {
        inputerro(zhengzhePhoneNumber, usernamePhoneNumber, userPhoneInputErro, "11位数字 只能1开头 第二位 3~9")
        inputBoxList[3].style.boxShadow = "0px 0px 0px -0px skyblue"
    })

    userInput.addEventListener("focus", () => {
        inputBoxList[0].style.boxShadow = "1px 26px 19px -20px skyblue"

    })

    userPassword.addEventListener("focus", () => {
        inputBoxList[1].style.boxShadow = "1px 26px 19px -20px skyblue"

    })

    userQQemail.addEventListener("focus", () => {
        inputBoxList[2].style.boxShadow = "1px 26px 19px -20px skyblue"
    })

    usernamePhoneNumber.addEventListener("focus", () => {
        inputBoxList[3].style.boxShadow = "1px 26px 19px -20px skyblue"
    })


    var sexForwomen = document.querySelector(".sexForwomen");
    var posiztionTeacher = document.querySelector(".posiztionTeacher")

    var mask = document.querySelector(".mask");
    // 提交表单
    form.addEventListener("submit", (event) => {
        event.preventDefault()
        if (zhengzhePassword.test(userPassword.value) && zhenzheUsername.test(userInput.value) && zhengzheQqemail.test(userQQemail.value) && zhengzhePhoneNumber.test(usernamePhoneNumber.value)) {
            var sex = 0;
            var profession = 0

            if (sexForwomen.checked) {
                sex = 1;
            }
            if (posiztionTeacher.checked) {
                profession = 1
            }

            // 提交
            axios({
                method: 'post',
                url: '/Indenture/register',
                data: {
                    username: userInput.value,
                    password: userPassword.value,
                    sex: sex,
                    email: userQQemail.value,
                    phone: usernamePhoneNumber.value,
                    uurl: "./image/(J(85}~5K@VBL7M(979@G8R.png",
                    status: profession
                },
                success: (res) => {
                    console.log(res.data)
                }
            }).then((res) => {
                console.log(res.data)
                if (res.data.status == 0) {

                    setTimeout(() => {
                        mask.style.display = "none"
                        inputErrpMsg.innerHTML = res.data.Msg;
                    }, 500)
                } else {
                    setTimeout(() => {
                        mask.style.display = "none"
                        alert("注册成功")
                        location.href = "/Indenture/login.html"
                    }, 500)
                }
            })


        } else {
            inputErrpMsg.innerHTML = "输入有误！"
        }
    })

    // 表单验证函数 正则表达式 检验的数据 提示对象 提示信息
    function inputerro(zhengze, chectValue, promptErro, promptMsge) {
        if (zhengze.test(chectValue.value)) {
            promptErro.innerHTML = "✔ 符合要求"
            promptErro.style.color = "green"
        } else {
            promptErro.innerHTML = "❌ 不能为空且 " + promptMsge
            promptErro.style.color = "red"
        }
    }

    var inputregister = document.querySelector(".inputregister")
    inputregister.addEventListener("click", function (event) {
        event.preventDefault();
        location.href = "login.html";
    })
</script>
</body>

</html>